<template>
  <view class="page">
    <u-navbar @leftClick="navLeftClick" class="u-m-b-12" :fixed="false" title="推广人订单" placeholder bgColor="#fff"></u-navbar>
    <view class="address-item" v-for="(item, index) in list" :key="item.id">
      <view class="address-content">
        <view class="u-p-b-22 u-m-b-12" style="border-bottom: 2rpx solid #E1E1E1;">
          <view class="u-font-28 u-m-b-6 u-flex u-row-between">
            <text style="font-weight: 500;">订单号：{{ item.orderCode }}</text>
            <text class="u-font-24" style="color: #333333;">{{ item.nickName }}（{{ commissionType[item.commissionType] }}）</text>
          </view>
          <view class="u-font-24 u-m-b-6" style="color: #333333;">商品信息：{{ item.productName }}</view>
          <view class="u-font-24 u-m-b-6" style="color: #333333;">商品数量：{{ item.productNum }}</view>
          <view class="u-font-24 u-m-b-6" style="color: #333333;">订单金额：{{ item.totalAmountCents }}</view>
        </view>
        <view class="u-font-24 u-flex u-row-between">
          <text style="color: #E20300;">收益金额：￥{{ item.commissionAmount }}</text>
          <text style="color: #818181;">{{ item.transaTime }}</text>
        </view>
      </view>
    </view>
    <a-empty v-if="!list.length"></a-empty>
  </view>
</template>

<script>
import { getSpreadOrder } from '@/api/index'

export default {
  data() {
    return {
      pageNum: 1,
      list: [],
      pages: 0,
      commissionType: {
        '1': '1级',
        '2': '2级',
        '3': '合伙人分佣',
        '4': '团长分佣',
      }
    };
  },
  onShow() {
    this.getPage()
  },
  methods: {
    getPage() {
      uni.showLoading({ mask: true })
      getSpreadOrder({userId: uni.getStorageSync('userInfo').userId}).then(res => {
        uni.hideLoading()
        this.list = res.data
        console.log(this.list.length);
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 750rpx;
  min-height: 100vh;
  background-color: #F5F5F5;
  padding-bottom: 80rpx;
  position: relative;
  .address-item {
    width: 702rpx;
    background: #FFFFFF;
    border-radius: 12rpx;
    margin: 16rpx auto;
    .address-content {
      padding: 14rpx 26rpx;
      .default-icon {
        width: 80rpx;
        height: 32rpx;
        line-height: 32rpx;
        text-align: center;
        background: #56CB03;
        border-radius: 200rpx;
        font-size: 20rpx;
        color: #FFFFFF;
      }
    }
  }
  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6rpx;
    width: 360rpx;
    height: 80rpx;
    background: #FFFFFF;
    border-radius: 200rpx;
    border: 2rpx solid #56CB03;
    font-size: 28rpx;
    color: #56CB03;
    margin: 42rpx auto 0;
  }
}
</style>
